<template>
  <div class="g-bd">
    <div v-if="userInfo">
      <!-- 头部 -->
      <div class="head-wrap clearfix">
        <div class="avater">
          <img :src="userInfo.profile.avatarUrl + '?param=180y180'" alt="" />
        </div>
        <div class="info-wrap">
          <div class="title clearfix">
            <div class="edit">
              <router-link :to="'/artist?id=' + userInfo.profile.artistId" class="u-btn2" v-if="userInfo.profile.artistId"
                ><i>查看歌手页</i></router-link
              >
            </div>
            <div class="name-wrap">
              <h3 class="name f-thide">{{ userInfo.profile.nickname }}</h3>
              <div class="vip-level"></div>
              <div class="lv u-icn2">{{ userInfo.level }}<i class="u-icn2"></i></div>
              <div
                class="gender u-icn"
                :class="userInfo.profile.gender === 1 ? 'male' : 'female'"
              ></div>
            </div>
            <div class="opt">
              <a href="javascript:;" class="send u-btn"><i>发私信</i></a>
              <a href="javascript:;" class="followed u-btn" style="display: none"><i>已关注</i></a>
              <a href="javascript:;" class="follow u-btn">关 注</a>
            </div>
          </div>
          <p class="nick" v-if="userInfo.identify">
            <i class="u-icn2"></i>{{ userInfo.identify.imageDesc }}
          </p>
          <ul class="tab clearfix">
            <li class="item">
              <router-link to="">
                <strong class="num">{{ userInfo.profile.accountStatus }}</strong>
                <span>动态</span></router-link
              >
            </li>
            <li class="item">
              <router-link to="">
                <strong class="num">{{ userInfo.profile.follows }}</strong>
                <span>关注</span></router-link
              >
            </li>
            <li class="item">
              <router-link to="">
                <strong class="num">{{ userInfo.profile.followeds }}</strong>
                <span>粉丝</span></router-link
              >
            </li>
          </ul>
          <p class="desc" v-if="userInfo.profile.signature">
            个人介绍：<span>{{ userInfo.profile.signature }}</span>
          </p>
          <p class="location" v-if="userInfo.profile.province">
            所在地区：<span>{{ cityName }}</span>
            <!-- 所在地区：<span>{{ userInfo.profile.province }}{{ ' - ' + userInfo.profile.city }}</span> -->
          </p>
        </div>
      </div>
      <!-- 听歌记录 -->
      <div class="blk record" v-if="false">
        <div class="u-title">
          <h3>听歌排行榜</h3>
          <span class="sub">累积听歌{{ 29 }}首</span>
          <span class="iconpoint">
            <a href="javascript:;" class="u-icn2"></a>
            <div class="tip">
              <p>实际播放时间过短的歌曲将不纳入计算。</p>
              <i class="t"></i>
              <i class="b"></i>
            </div>
          </span>
          <div class="f-fr nav">
            <span class="item">最近一周</span>
            <span class="line">|</span>
            <span class="item z-sel">所有时间</span>
          </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="tml-song-list">
          <div class="tmls-wrap">
            <ul>
              <li class="clearfix">
                <!-- 排名 -->
                <div class="tb-hd">
                  <div class="hd clearfix">
                    <span class="num">{{ 1 + '.' }}</span>
                    <div class="ply"><span class="icon"></span></div>
                  </div>
                </div>
                <!-- 歌名 -->
                <div class="title-tb">
                  <div class="f-fl">
                    <div class="dec">
                      <span class="decwrap">
                        <span class="txt"
                          ><router-link to="`/song?id=${item.id}`"
                            ><b>Booty Call</b></router-link
                          ></span
                        >
                        <span class="alia"> - 张惠妹</span>
                      </span>
                    </div>
                  </div>
                  <div class="opt f-fr">
                    <a href="" class="u-icn add" title="添加到播放列表"></a>
                    <span class="icn icn-fav" title="收藏"></span>
                    <span class="icn icn-share" title="分享"></span>
                    <span class="icn icn-dl" title="下载"></span>
                  </div>
                </div>
                <!-- 时长 -->
                <div class="tops">
                  <span class="bg"></span>
                </div>
              </li>
              <li class="even clearfix">
                <!-- 排名 -->
                <div class="tb-hd">
                  <div class="hd clearfix">
                    <span class="num">{{ 1 + '.' }}</span>
                    <div class="ply"><span class="icon"></span></div>
                  </div>
                </div>
                <!-- 歌名 -->
                <div class="title-tb">
                  <div class="f-fl">
                    <div class="dec">
                      <span class="decwrap">
                        <span class="txt"
                          ><router-link to="`/song?id=${item.id}`"
                            ><b>Booty Call</b></router-link
                          ></span
                        >
                        <span class="alia"> - 张惠妹</span>
                      </span>
                    </div>
                  </div>
                  <div class="opt f-fr">
                    <a href="" class="u-icn add" title="添加到播放列表"></a>
                    <span class="icn icn-fav" title="收藏"></span>
                    <span class="icn icn-share" title="分享"></span>
                    <span class="icn icn-dl" title="下载"></span>
                  </div>
                </div>
                <!-- 时长 -->
                <div class="tops">
                  <span class="bg"></span>
                </div>
              </li>
              <li class="clearfix">
                <!-- 排名 -->
                <div class="tb-hd">
                  <div class="hd clearfix">
                    <span class="num">{{ 1 + '.' }}</span>
                    <div class="ply"><span class="icon"></span></div>
                  </div>
                </div>
                <!-- 歌名 -->
                <div class="title-tb">
                  <div class="f-fl">
                    <div class="dec">
                      <span class="decwrap">
                        <span class="txt"
                          ><router-link to="`/song?id=${item.id}`"
                            ><b>Booty Call</b></router-link
                          ></span
                        >
                        <span class="alia"> - 张惠妹</span>
                      </span>
                    </div>
                  </div>
                  <div class="opt f-fr">
                    <a href="" class="u-icn add" title="添加到播放列表"></a>
                    <span class="icn icn-fav" title="收藏"></span>
                    <span class="icn icn-share" title="分享"></span>
                    <span class="icn icn-dl" title="下载"></span>
                  </div>
                </div>
                <!-- 时长 -->
                <div class="tops">
                  <span class="bg"></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="created" v-if="createdPlayList && createdPlayList.length">
        <div class="u-title">
          <h3>
            {{ userInfo.profile.nickname }}创建的歌单<span class="black-icn"></span>&nbsp;&nbsp;({{
              createdPlayList.length
            }})
          </h3>
        </div>
        <ul class="rcmd-list">
          <li v-for="item in createdPlayList" :key="item.id">
            <router-link :to="'/playlist?id=' + item.id" class="img-link" :title="item.name">
              <img :src="item.coverImgUrl + '?param=140y140'" alt="" />
              <div class="msk"></div>
              <div class="bottom">
                <span class="icon-head"></span>
                <!-- <span class="play-count">100</span> -->
                <span class="play-count">{{ item.playCount | CountFormat }}</span>
                <!-- <a href="javascript:void(0);" class="play" @click.prevent="setSongList(item)"></a> -->
                <a
                  href="javascript:void(0);"
                  class="play"
                  @click.prevent="setSongList(item.id)"
                ></a>
              </div>
            </router-link>
            <p class="desc">
              <!-- <router-link :to="'/playlist?id=' + item">Mr--Alex的2020年度歌单</router-link> -->
              <router-link :to="'/playlist?id=' + item">{{ item.name }}</router-link>
            </p>
          </li>
        </ul>
      </div>
      <div class="collected" v-if="collectedPlayList && collectedPlayList.length">
        <div class="u-title">
          <h3>
            {{ userInfo.profile.nickname }}收藏的歌单<span class="black-icn"></span>&nbsp;&nbsp;({{
              collectedPlayList.length
            }})
          </h3>
        </div>
        <ul class="rcmd-list">
          <li v-for="item in collectedPlayList" :key="item.id">
            <router-link :to="'/playlist?id=' + item.id" class="img-link" :title="item.name">
              <img :src="item.coverImgUrl + '?param=140y140'" alt="" />
              <div class="msk"></div>
              <div class="bottom">
                <span class="icon-head"></span>
                <!-- <span class="play-count">100</span> -->
                <span class="play-count">{{ item.playCount | CountFormat }}</span>
                <!-- <a href="javascript:void(0);" class="play" @click.prevent="setSongList(item)"></a> -->
                <a
                  href="javascript:void(0);"
                  class="play"
                  @click.prevent="setSongList(item.id)"
                ></a>
              </div>
            </router-link>
            <p class="desc">
              <!-- <router-link :to="'/playlist?id=' + item">Mr--Alex的2020年度歌单</router-link> -->
              <router-link :to="'/playlist?id=' + item">{{ item.name }}</router-link>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import city from '@/assets/city.json'
import { CountFormat } from '@/utils/filters.js'
export default {
  data() {
    return {
      // 用户信息
      userInfo: null,
      createdPlayList: null,
      collectedPlayList: null
    }
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const { data } = await this.$http.get(`/user/detail?uid=${this.$route.query.id}`)
      this.userInfo = data
    },
    // 获取歌单列表
    async getPlayList() {
      const createdPlayList = []
      const collectedPlayList = []
      const { data } = await this.$http.get(`/user/playlist?uid=${this.$route.query.id}`)
      data.playlist.forEach(item => {
        if (item.creator.userId.toString() === this.$route.query.id) {
          createdPlayList.push(item)
        } else {
          collectedPlayList.push(item)
        }
      })
      this.createdPlayList = createdPlayList
      this.collectedPlayList = collectedPlayList
    }
  },
  computed: {
    cityName() {
      const province = city.find(prov => {
        return prov.code === this.userInfo.profile.province.toString()
      })
      const c = province.children.find(item => {
        return item.code === this.userInfo.profile.city.toString()
      })
      console.log(c)
      return province.name + (c ? ' - ' + c.name : '')
    }
  },
  filters: {
    CountFormat
  },
  created() {
    // 获取用户信息
    this.getUserInfo()
    this.getPlayList()
    // console.log(city)
  }
}
</script>

<style lang="less" scoped>
@import url(./UserHome.less);
</style>
